<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title data-th-text="${readOnly} ? #{admin.profile.view_title} : #{admin.profile.title}">团队管理</title>
    <link rel="stylesheet" href="../../webjars/bootstrap/dist/css/bootstrap.min.css"
          data-th-href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../webjars/bootstrap-material-design/dist/bootstrap-material-design.min.css"
          data-th-href="@{/webjars/bootstrap-material-design/dist/bootstrap-material-design.min.css}">
    <link rel="stylesheet" href="../../static/css/bg.css" data-th-href="@{/static/css/bg.css}">
    <style type="text/css">

        #main-table {
            display: table;
        }

        @media screen and (max-width: 768px) {
            #main-table {
                display: inline-block;
            }
        }

        .table thead th, .table tbody tr td {
            min-width: 4rem;
        }

        .alert-dismissible .close {
            position: relative;
            right: -1.25rem;
            padding: .75rem 1.25rem;
            color: inherit;
        }

        .alert strong {
            margin-right: 1rem;
        }
    </style>

</head>
<body>
<div id="bg"></div>
<nav class="navbar navbar-toggleable-md fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="../../static/image/favicon.svg"
                     data-th-src="@{/static/image/favicon.svg}"
                     width="30" height="30" class="d-inline-block align-top">项目管理系统
            </a>
        </div>
    </div>
</nav>

<div class="container-fluid pt-md-3">
    <div class="row">
        <div class="col-md-3 offset-md-1">
            <div class="list-group pt-md-0">
                <a href="#" class="list-group-item active">
                    我的菜单
                </a>
                <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">基本信息</a>
                <a href="profile.html" data-th-href="@{'/admin/' + ${adminId}}" class="list-group-item">个人信息</a>
                <a href="password.html" data-th-href="@{'/admin/' + ${adminId} + '/password'}" class="list-group-item">密码修改</a>
                <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">项目报告任务</a>
                <a href="taskCreate.html" data-th-href="@{/task/create}" class="list-group-item">新建任务</a>
                <a href="taskHistory.html" data-th-href="@{/task/history}" class="list-group-item">历史任务</a>
                <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">导师评审链接</a>
                <a href="tokenCurrent.html" data-th-href="@{/token/current}" class="list-group-item">新建链接</a>
                <a href="tokenHistory.html" data-th-href="@{/token/history}" class="list-group-item">历史链接</a>
                <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">团队项目报告</a>
                <a href="results.html" data-th-href="@{/result/current}" class="list-group-item">查看与评审</a>
                <a href="reportHistory.html" data-th-href="@{/result/history}" class="list-group-item">历史项目报告</a>
                <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">用户管理</a>
                <a href="tutorAdmin.html" data-th-href="@{/admin/tutor}" class="list-group-item">导师管理</a>
                <a href="teamAdmin.html" data-th-href="@{/admin/team}" class="list-group-item">团队管理</a>
            </div>
        </div>
        <div id="main" class="col-md-7 pl-md-0">
            <h2 style="text-align: center;">
                团队管理
            </h2>

            <div class="form-group">
                <button id="register" class="btn btn-primary">新增团队</button>
            </div>
            <form id="profileForm" data-th-action="@{/team}" method="POST" style="display: none">
                <div class="form-group row mt-2">
                    <div class="input-group col-md-5">
                        <label for="username" class="input-group-addon" data-th-text="#{username}">用户名</label>
                        <input class="form-control" id="username" name="username" required/>
                    </div>
                    <div class="input-group col-md-6 pl-md-0 offset-md-1 mt-3 mt-md-0">
                        <label for="email" class="input-group-addon" data-th-text="#{email}">电子邮件</label>
                        <input type="email" class="form-control" id="email" name="email"/>
                    </div>
                </div>
                <div class="form-group row mt-3">
                    <div class="input-group col-md-5">
                        <label for="displayName" class="input-group-addon" data-th-text="#{display_name}">姓名</label>
                        <input class="form-control" id="displayName" name="displayName" required/>
                    </div>
                    <div class="input-group col-md-6 pl-md-0 offset-md-1 mt-3 mt-md-0">
                        <label for="phone" class="input-group-addon" data-th-text="#{phone}">手机号码</label>
                        <input type="tel" class="form-control" id="phone" name="phone"/>
                    </div>
                </div>
                <div class="form-group row mt-3">
                    <div class="input-group col-md-5">
                        <label for="projectName" class="input-group-addon" data-th-text="#{project_name}">项目名</label>
                        <input class="form-control" id="projectName" name="projectName" required/>
                    </div>
                    <div class="input-group col-md-6 pl-md-0 offset-md-1 mt-3 mt-md-0">
                        <label for="password" class="input-group-addon" data-th-text="#{password}">密码</label>
                        <input type="password" class="form-control" id="password" name="password"/>
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block" data-th-text="#{submit}"
                            id="submit">提交
                    </button>
                </div>
            </form>

            <table id="main-table" class="table table-responsive table-striped table-hover">
                <thead>
                <tr>
                    <th>团队编号</th>
                    <th>团队名</th>
                    <th>项目名</th>
                    <th>手机</th>
                    <th>邮箱</th>
                    <th>修改操作</th>
                    <th>删除操作</th>
                </tr>
                </thead>
                <tbody>
                <tr data-th-each="team : ${teams}"><!-- 数据待定 -->
                    <td data-th-text="${team.id}">2017072001</td>
                    <td data-th-text="${team.username}">yeah buddy</td>
                    <td data-th-text="${team.projectName}">项目管理系统</td>
                    <td data-th-text="${team.phone}">0000 0000</td>
                    <td data-th-text="${team.email}">000000@xmu.edu.com</td>
                    <td>
                        <button class="btn btn-primary btn-manage" type="button" data-th-data-id="${team.id}">修改
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-delete" type="button" data-th-data-id="${team.id}">删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <footer class="row clearfix" data-th-replace="~{footer::normal}">
        <div class="col-md-10 offset-md-1 column">
            <ul class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.about}">关于我们</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.feedback}">意见反馈</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.help}">帮助中心</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.us}">联系我们</a>
                </li>
                <li class="breadcrumb-item active">
                    All rights reserved
                </li>
            </ul>
        </div>
    </footer>
</div>
<script src="../../webjars/jquery/dist/jquery.min.js" data-th-src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<script src="../../webjars/tether/dist/js/tether.min.js"
        data-th-src="@{/webjars/tether/dist/js/tether.min.js}"></script>
<script src="../../webjars/bootstrap/dist/js/bootstrap.min.js"
        data-th-src="@{/webjars/bootstrap/dist/js/bootstrap.min.js}"></script>
<!--suppress XmlDefaultAttributeValue -->
<script>
    $(function () {
        $(".btn-manage").click(function () {
            location.href = "/team/" + $(this).attr("data-id");
        });
        $(".btn-delete").click(function () {
            $.ajax({
                method: "DELETE",
                url: "/team/" + $(this).attr("data-id"),
                success: function (data) {
                    $("#main").prepend('<div class="row"><div class="alert alert-success alert-dismissible fade show col-12" role="alert"><button type="button" class="close m-0 p-0" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>' + data.status + '</strong>' + data.message + '</div></div>');
                },
                error: function (jqXHR) {
                    $("#main").prepend('<div class="row"><div class="alert alert-warning alert-dismissible fade show col-12" role="alert"><button type="button" class="close m-0 p-0" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>' + jqXHR.responseJSON.error + '</strong>' + jqXHR.responseJSON.message + '</div></div>');
                }
            });
        });
        $("#register").click(function () {
            $(this).hide();
            $("#profileForm").show();
        })
    });

</script>
</body>
</html>